<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">确认订单</text>

		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="top-box">
			<view class="top-cell justify-between align-center">
				<u-input
				 fontSize='12'
				 color='#FFF' border="none" clearable v-model="address" :placeholder="placeholder"></u-input>
			</view>
		</view>
		<view class="good-box">
			<view class="longdan-box justify-start" :class="hasSelect.includes(k)?'border':''"
				v-for="v,k in selectGoods" >

				<image class="longdan" :src="v.image" mode=""></image>
				<view class="flex-col justify-between">
					<view class="name">
						{{v.name}}
					</view>
					<view class="number">
						x{{v.total_num}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" :style="{background: disable?'#8E929D':'#27ff92'}" @tap="nextStep">
				提取
			</view>
		</view>



		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">
				<view class="has-shuijing justify-center">
					系统提示
				</view>
				<view class="has-shuijing-desc justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/appCenter/userRealName')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				placeholder: '',
				address: '',
				hasSelect: [],
				current: 0,
				moneyShow: false,
				page: 1,
				pagesize: 0,
				totalpage: 0,
				eggInfoList: [

				],
				box_id:'',

			}
		},
		onLoad(e) {
			if (e.placeholder) {
				this.placeholder = e.placeholder
			}
			this.getIndex()
			console.log(this.$store.state.user.safeBoxGoodsLis,'this.$store.state.user.safeBoxGoodsLis');
		},
		computed: {
			disable() {
				return this.address==''
			},
			selectGoods(){
				return this.$store.state.user.safeBoxGoodsLis
			}
		},
		methods: {
			// 提货
			async nextStep() {
				let _this = this
				if (this.disable) return
				this.box_id = this.selectGoods[0].goods_id
				let url = '/api/v1/take'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					goods_id: this.box_id,
					address: this.address,
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.$refs.uToast.show({
						message: msg,
						complete(){
							_this.$navto('/pages/mine/appCenter/mySafeBox/mySafeBox')
						}
					})
					
				}
			},
			openEgg(v, k) {
				if (this.hasSelect.includes(k)) {
					this.hasSelect = this.hasSelect.filter(item => item != k)
				} else {
					this.hasSelect.push(k)
				}
			},
			// 获取龙蛋数量和内容
			async getIndex() {
				// 获取保管箱内容
					let url = '/api/v1/my_box'
					let {
						code,
						msg,
						data
					} = await this.$getRequest(url)
					if (code == 200) {
						console.log(data, '静态资源');
						this.eggInfoList = data.list || []
						this.total = data.total
						this.placeholder = data.input_text
						let arr = 0
						this.eggInfoList.map(item => {
							arr += Number(item.total_num)
						})
						this.empy = arr
					} else {
						this.$refs.uToast.show({
							message: msg
						})
					}
			},
			goGive() {
				console.log("uni.getStorageSync('userInfo').auth", uni.getStorageSync('userInfo'));
				// 去赠送
				// 需要修改bs
				if (uni.getStorageSync('userInfo').auth != 0) {
					// 没有实名认证需要弹窗
					this.moneyShow = true
				} else {
					this.$navto('/pages/mine/myOre/oreGive')
				}
			},
			// 应用中心
			getCategory(value) {
				switch (value) {
					case 0:
						// 邀请好友
						this.$navto('/pages/mine/appCenter/inviteFriends')
						break;
					default:
						break;
				}
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		min-height: 100vh;
		background: #16161e;
		padding: 0 30rpx;

		// padding: 0 32rpx 60rpx;
		.center-slot {
			color: #FFF;

		}

		.top-box {
			width: 100%;
			position: relative;
			margin: 20rpx auto 0rpx;
			padding: 30rpx 30rpx;
			background-color: #20202c;
			border-radius: 8rpx;

			.top-cell {
				background: #282A37;
				min-height: 87rpx;
				padding: 20rpx;
				color: #FFF;

				.name {
					margin-top: 10rpx;
					font-size: 30rpx;
					color: rgba(255, 255, 255, .8);

				}

				.ava {
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}
			}


			.my-qing-long {
				font-size: 28rpx;
				width: 260rpx;
				color: rgba(255, 255, 255, .8);
				text-align: left;
			}

			.long-num {
				width: 30rpx;
				height: 30rpx;

			}
		}

		.right-slot {
			color: #FFF;
			font-size: 26rpx;

		}

		.btn-box {
			position: fixed;
			height: 128rpx;
			width: 100vw;
			bottom: 0;
			padding: 24rpx 48rpx;
			font-weight: 700;
			font-size: 30rpx;
			box-sizing: content-box;
			// background-color: rgb(32, 32, 44);
			color: rgba(255, 255, 255, 0.8);

			.btn {
				width: 20.4375rem;
				border-radius: .25rem;
				font-size: .9375rem;
				height: 2.8125rem;
				line-height: 2.8125rem;
				background: #27FF92;
				color: #000;
				text-align: center;
				margin: auto;
			}
		}

		.good-box {
			margin-top: 34rpx;
			width: 100%;
			padding: 0 0rpx;
			border-radius: 8rpx;
		}

		.border {
			// border: 4rpx solid #27ff92 !important;
		}

		.longdan-box {
			padding: 30rpx;
			background: #21202E;
			border-radius: 8rpx;
			position: relative;
			border: 4rpx solid #27ff9200;
			// #27ff92

			.select {
				position: absolute;
				z-index: 1000;
				top: 20rpx;
				right: 20rpx;
				border-radius: 50%;
				background: #27ff92;
			}

			.longdan {
				width: 161rpx;
				height: 161rpx;
				margin-right: 26rpx;
				border-radius: 16rpx;
			}

			.name {
				margin-top: 20rpx;
				color: #FFF;
				font-size: 25rpx;
				font-weight: bold;
			}

			.number {
				margin-bottom: 9rpx;
				color: #FFF;
				font-size: 27rpx;
				font-weight: bold;
			}
		}

	}


	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}

		.has-shuijing-desc {
			color: rgba(255, 255, 255, .6);
			font-size: .75rem;
			line-height: 1.125rem;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}
</style>